<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> 
<style>

</style>
<div>
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#1" data-toggle="tab"><font size="+1">基本信息</font></a></li>
   <li><a href="#2" data-toggle="tab"><font size="+1">地址管理</font></a></li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="1">
<!--    下拉框的值固定 -->
   <input type="hidden" id="showsex" value="${user.userDetail.sex}">
   <input type="hidden" id="showeducation" value="${user.userDetail.education}">
   <input type="hidden" id="showjob" value="${user.userDetail.job}">
   <input type="hidden" id="showsalary" value="${user.userDetail.salary}">
   <form id="form1">
   <input type="hidden" name="id" value="${user.userDetail.id}">
   		<table style="border-collapse:separate; border-spacing:0px 20px;width:450px;" >
   			<tr>
   				<td>头像：
   				<br>
   				(180X180)
   				</td>
   				<td>
   					<a id="choose_img"  href="#" style="width:82px;height:82px;"class="thumbnail">
      					<img id="showImg" width="80px" src="user_headimage_load?pictureId=${user.userDetail.img_url}">
   					 </a>
   				</td>
   			</tr>
   			<tr>
   				<td>昵称：</td>
   				<td><input type="text"  name="nickname"autocomplete="off"  class="form-control" value="${user.userDetail.nickname}"></td>
   			</tr>
   			<tr> 
   				<td>生日：</td>
   				<td><input  type="text" id="birthday" name="birthday" autocomplete="off"  value="<fmt:formatDate value="${user.userDetail.birthday}" pattern="yyyy-MM-dd"/>"class="form-control form_datetime" ></td>
   			</tr>
   			<tr>
   				<td>性别：</td>
   				<td><select id="sex" class="form-control" name="sex">
					   <option value="男">男</option>
					   <option value="女">女</option>
					</select>
				</td>
   			</tr>
   			<tr>
   				<td>教育：</td>
   				<td>
   					<select id="education"class="form-control" name="education">
					   
                                <option value="">请选择</option>
                          		  <option value="小学及以下">小学及以下</option>
                          		  <option value="初中">初中</option>
                          		  <option value="中专">中专</option>
                          		  <option value="职高">职高</option>
                          		  <option value="高中">高中</option>
                          		  <option value="大专">大专</option>
                          		  <option value="本科">本科</option>
                          		  <option value="硕士">硕士</option>
                          		  <option value="MBA">MBA</option>
                          		  <option value="博士">博士</option>
                          		  <option value="博士后">博士后</option>
					</select>
   				</td>
   			</tr>
   			<tr>
   				<td>职业：</td>
   				<td>	<select id="job"class="form-control" name="job">
                             <option value="">请选择</option>
                            <option value="计算机/互联网/通信/电子">计算机/互联网/通信/电子</option>
                            <option value="银行/保险/证券/基金/投资">银行/保险/证券/基金/投资</option>
                            <option value="贸易/消费/制造/营运">贸易/消费/制造/营运</option>
                            <option value="制药/医疗/保健/美容">制药/医疗/保健/美容</option>
                            <option value="咨询/财会/法律">咨询/财会/法律</option>
                            <option value="广告/媒体">广告/媒体</option>
                            <option value="房地产/建筑">房地产/建筑</option>
                            <option value="教育/培训">教育/培训</option>
                            <option value="服务业">服务业</option>
                            <option value="物流/运输">物流/运输</option>
                            <option value="能源/原材料">能源/原材料</option>
                            <option value="学生">学生</option>
                            <option value="政府/非赢利机构">政府/非赢利机构</option>
                            <option value="自由职业">自由职业</option>
                            <option value="军人">军人</option>
                            <option value="商人">商人</option>
                            <option value="已退休">已退休</option>
                            <option value="待业">待业</option>
                            <option value="管理人员">管理人员</option>
   						</select>
   				</td>
   			</tr>
   			<tr>
   				<td>月薪：</td>
   				<td>
   					<select id="salary"class="form-control" name="salary">
                         <option value="">请选择</option>
                     	<option value="1000元以下">1000元以下</option>
                     	<option value="1000-1999元">1000-1999元</option>
                     	<option value="2000-2999元">2000-2999元</option>
                     	<option value="3000-4999元">3000-4999元</option>
                     	<option value="5000-7999元">5000-7999元</option>
                     	<option value="8000-9999元">8000-9999元</option>
                     	<option value="10000-14999元">10000-14999元</option>
                     	<option value="15000-19999元">15000-19999元</option>
                     	<option value="20000+">20000+</option>
                     </select>
   				</td>
   			</tr>
   		</table>
   		<input id="img_url" name="img_url" type="hidden" value="${user.userDetail.img_url}">
   		</form>
   		<button  class="btn btn-info btn-lg"  onClick="saveUser()" style="width:100px;margin-left:351px;">保存</button>
   		<!-- 图片上传区域的隐藏模块 -->
		<input id="imgFile" accept="image/*" type="file"  autocomplete="off"  style="display:none;" onchange ="uploadImg()"/>
   </div>
   <div class="tab-pane fade" id="2">
   <form id="form2">
   	<table style="border-collapse:separate; border-spacing:0px 20px;width:450px;" >
	   	<tr>
	   		<td>真实姓名：</td>
	   		<td>
	   			<input type="text"  name="realname" class="form-control" value="${user.userDetail.realname}">
	   		</td>
	   	</tr>
	   	<tr>
	   		<td>联系电话：</td>
	   		<td><input type="text"   name="tell" class="form-control" value="${user.userDetail.tell}"></td>
	   	</tr>
	   	<tr>
	   		<td>详细地址：</td>
	   		<td><input type="text"  name="address" class="form-control" value="${user.userDetail.address}"></td>
	   	</tr>
   	</table>
   	</form>
   	<button  class="btn btn-info btn-lg"  onClick="saveUser()"  style="width:100px;margin-left:351px;">保存</button>
   </div>
   
</div>
</div>
<script>
//值固定
$("#sex").val($("#showsex").val());
$("#education").val($("#showeducation").val());
$("#job").val($("#showjob").val());
$("#salary").val($("#showsalary").val());
/* 时间插件 */
$(function(){
		/* 日历插件  选择年月日*/
		$(".form_datetime").datetimepicker({
			format: "yyyy-mm-dd",
			autoclose: true,
			showMeridian: true,
			changeYear:true,
			pickerPosition: "bottom-left",
			language: 'zh-CN',//中文，需要引用zh-CN.js包
			startView: 2,//月视图
			minView: 2,//日期时间选择器所能够提供的最精确的时间选择视图
		}); 
	});
</script>
<script>
//头像选择处理

/* 图片选择触发点击 */
$("#choose_img").click(function(){
	 $("#imgFile").trigger("click");
});

/* 图片上传ajax */
function uploadImg(){
	var formData = new FormData();
	 formData.append("file", document.getElementById("imgFile").files[0]);  
	$.ajax({
		 url: "user_headimage_upload",
         type: "POST",
         data: formData,
		contentType: false,
        processData: false,
        success: function (data) {
           $("#showImg").attr("src","user_headimage_load?pictureId="+data);
           $("#img_url").val(data);
        },
        error:function(data){
           
        }
	});
}

function saveUser(){
	var a = $("#form1").serialize();
	var b = $("#form2").serialize();
	var userDetail = a+"&"+b;
	console.log(userDetail);
	$.ajax({
		url:"user_acount_add",
		data:userDetail,
		type:"post",
		success:function(data){
			if(data=="SUCCESS"){
				alert("保存成功");
			}
		}
		
	});
	
}
</script>